<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/js/jquery-1.9.1.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
	  $("#serch").click(function(){
		  //配置查询商品请求
		    var gid=$("#gid").val();
	        $.ajax({
	        	type:'post',
	        	url:'${pageContext.request.contextPath}/serchgoods',
	        	data:{'gid':gid},
	        	dataType:'json',
	        	success:function(data){
	        		$("#goodsinfo").empty().append("<tr><td id='flag'>"+data.gid+"</td><td>"+data.gname+"</td><td>"+data.gprice+"</td><td>"+data.ginventory+"</td><td><input style='width:55px;' type='text'/>件</td><td><button type='button' onclick='add()' style='margin-left:10px;' class='btn btn-primary btn-xs'>点我</button></td></tr>");
	        	}
	        	
	        })
	  })
	  $("#list").click(function(){
	     var  olist =  $("#orderlist").serializeArray();
	     var o ={};
	     $.each(olist,function(index){
			  if(o[this['name']]){
			  o[this['name']] = o[this['name']] +","+this['value'];
			  }else{
			  o[this['name']] = this['value'];
			  }
			  });  
	       $.ajax({
        	type:'post',
        	url:'${pageContext.request.contextPath}/submitorder',
        	data:{"goods":JSON.stringify(o)},
        	dataType:'json',
        	success:function(data){
        		$("#msg").text(data.msg);
        		$("#total").val(data.total);
        	}
        	
        })
	  })
	  
	 
  })
  //点我按钮事件
   function add(){
    var gid=document.getElementById("flag").innerHTML;
    var gname=document.getElementById("flag").nextSibling.innerHTML
    var gprice=document.getElementById("flag").nextSibling.nextSibling.innerHTML
    var ginventory=document.getElementById("flag").nextSibling.nextSibling.nextSibling.innerHTML
 
    var gnumber=document.getElementById("flag").nextSibling.nextSibling.nextSibling.nextSibling.firstChild.value; 

    if(parseInt(gnumber)>parseInt(ginventory)){
    	alert("对不起最多购买"+ginventory+"件");
    }else if(parseInt(gnumber)<=0){
    	alert("不能输入负数或者0")
    }else{
    
    	 //创建一行
      var tr=document.createElement("tr");
  	  var td1=document.createElement("td");
  	  var td2=document.createElement("td");
  	  var td3=document.createElement("td");
  	  var td4=document.createElement("td");
  	  var td5=document.createElement("td");
  	  var td6=document.createElement("td");
  	//创建input框
  	  var input1=document.createElement("input");
  	   input1.setAttribute("type","text");
  	   input1.setAttribute("id","gids");
  	   input1.setAttribute("name","gids");
  	   input1.setAttribute("style","width:40px");
  	   input1.setAttribute("readonly","readonly");
  	   var input2=document.createElement("input");
  	   input2.setAttribute("type","text");
  	   input2.setAttribute("id","gnames");
  	   input2.setAttribute("name","gnames");
  	   input2.setAttribute("style","width:60px");
  	   input2.setAttribute("readonly","readonly");
  	   var input3=document.createElement("input");
  	   input3.setAttribute("type","text");
  	   input3.setAttribute("id","gprices");
  	   input3.setAttribute("name","gprices");
  	   input3.setAttribute("style","width:40px");
  	   input3.setAttribute("readonly","readonly");
  	   var input4=document.createElement("input");
  	   input4.setAttribute("type","text");
  	   input4.setAttribute("id","gnumbers");
  	   input4.setAttribute("name","gnumbers");
  	   input4.setAttribute("style","width:40px");
  	   input4.setAttribute("readonly","readonly");
  	   var input5=document.createElement("input");
  	   input5.setAttribute("type","text");
  	   input5.setAttribute("id","gmoneys");
  	   input5.setAttribute("name","gmoneys");
  	   input5.setAttribute("style","width:40px");
  	   input5.setAttribute("readonly","readonly");
  	  
  	 var input6=document.createElement("input");
	   input6.setAttribute("type","button");
	   input6.setAttribute("id","delete");
	   input6.setAttribute("onclick","delete1()");
	   input6.setAttribute("value","删除");
	   input6.setAttribute("style","width:40px");
  	   //将td追加到tr中
  	      tr.appendChild(td1); 
      	  tr.appendChild(td2);
      	  tr.appendChild(td3);
      	  tr.appendChild(td4);
      	  tr.appendChild(td5);
          tr.appendChild(td6);
  	 //将input框追加到td中
  	   td1.appendChild(input1);
  	   td2.appendChild(input2);
  	   td3.appendChild(input3);
  	   td4.appendChild(input4);
  	   td5.appendChild(input5);
  	   td6.appendChild(input6);
  	   //追加到表中
  	   var goods=document.getElementById("goodsinfos");
  	       goods.lastChild.appendChild(tr);
  	   input1.value=gid;
  	   input2.value=gname;
  	   input3.value=gprice;
  	   input4.value=gnumber;
  	   input5.value=gprice*gnumber;
  	   
    }
   
   }
   function delete1() {
	   var table=document.getElementById("delete").parentNode.parentNode.parentNode;
	      var tr=document.getElementById("delete").parentNode.parentNode
	      table.removeChild(tr)
 }
</script>
</head>
<body>
 <div class="container-fluid">
 
     <div class="row">
     <br>
      <div class="col-md-12" >
         <form class="form-inline" role="form">
			  <div class="form-group has-success has-feedback">
			    <input id="gid" name="gid" type="text" class="form-control" placeholder="输入商品编号查询商品" />
			    <span class="glyphicon glyphicon-search form-control-feedback "></span>
			  </div>
			 <button id="serch" type="button" class="btn btn-success">查询</button>
         </form>
      </div>
     </div>
     <div class="row">
     
      <div class="col-md-6" >
      <br><br>
       <table  class="table table-striped  table-bordered table-condensed">
         <tr id="biaotou"><td>商品编号</td><td>商品名字</td><td>商品单价（元）</td><td>商品库存</td><td>购买件数</td><td>加入清单</td></tr>
         <tbody id="goodsinfo">
         </tbody>
       </table>
      </div>
      
       <div class="col-md-6" >
		 <div class="panel panel-default" style="width:350px;margin-left:50px;height:420px">
		  <div class="panel-heading">
		    <h3 class="panel-title">购物清单</h3>
		  </div>
		  <div class="panel-body">
		  <!-- 购物清单 -->
		    <form id="orderlist" method="post" action="${pageContext.request.contextPath}/dayinxiaopiao">
		      
		      <table  id="goodsinfos" class="table table-striped  table-bordered table-condensed">
              <tr><td>编号</td><td>名称</td><td>单价(元)</td><td>购买(件)</td><td>合计(元)</td><td></td></tr>
               
              </table>
               总金额: <input id="total"  style="margin-left: 150px;width:80px" type="text">
                            <br><br>
           <span id="msg"></span><button id="list" style="margin-left: 200px" type="button" class="btn btn-success">生成清单</button>
           <br><br>
                  <button id="list" style="margin-left: 200px" type="submit" class="btn btn-success">打印小票</button>
		    </form>
		 </div>
       </div>
      </div>
      
      
     </div>
   </div>
</body>
</html>